<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户登录</title>
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap-icons/font/bootstrap-icons.css"
    />
    <style>
      .container-fluid {
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(to top, #7f7fd5, #86a8e7, #91eae4);
        background-size: cover;
      }
      .login-container {
        width: 350px;
        padding: 20px 30px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: rgba(255, 255, 255, 0.5);
      }

      .login-title {
        text-align: center;
        margin-bottom: 16px;
        color: #333;
      }
      .form-control:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
      }
      .btn-login {
        width: 100%;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="login-container">
        <h2 class="login-title">登录</h2>
        <form id="form">
          <div class="mb-3">
            <label for="username" class="form-label">账号：</label>
            <input
              type="text"
              class="form-control"
              id="username"
              name="username"
              value="admin"
            />
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码：</label>
            <input
              type="password"
              class="form-control"
              id="password"
              name="password"
              value="123456"
            />
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="rememberMe" />
            <label class="form-check-label" for="rememberMe">记住我</label>
          </div>
          <button
            type="submit"
            class="btn btn-primary btn-login"
            id="login-btn"
          >
            登录
          </button>
        </form>
        <div class="text-center mt-3">
          <span>没有账号?</span>
          <a href="register.html">去注册</a>
        </div>
        <div id="message" class="alert alert-danger mt-3 d-none"></div>
      </div>
    </div>

    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>

    <script src="./utils/request.js"></script>
    <script src="./utils/store.js"></script>
    <script src="./utils/message.js"></script>

    <script>
      $(document).ready(function () {
        // ----------------- 全局数据--------------------
        let username = "";
        let password = "";
        let rememberMe = false;

        // -----------------生命周期（立即执行函数） -----------------
        (function created() {
          bindEventListener();
        })();

        function bindEventListener() {}

        $("#form").on("submit", function (e) {
          e.preventDefault();

          // 获取表单数据
          username = $("#username").val();
          password = $("#password").val();
          rememberMe = $("#rememberMe").is(":checked");

          // 清除之前的错误消息
          $("#message").addClass("d-none");

          // 验证输入
          if (!username || !password) {
            message.error("Please input username and password!");
            return;
          }

          // 显示加载状态
          const $loginBtn = $("#login-btn");
          const btnText = $loginBtn.html();
          $loginBtn.prop("disabled", true);
          $loginBtn.html(
            '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Logging in ...'
          );

          login({ username, password }).then((response) => {
            if (response.code === 200) {
              setToken(rememberMe, response.data);

              getUser().then((response) => {
                if (response.code === 200) {
                  setLoginUser(response.data);
                  console.log(response.data);

                  if (response.data.menuList.length === 0) {
                    window.location.href = "./front-index.html";
                  } else {
                    window.location.href = "./user.html";
                  }
                }
              });
            } else if (response.code === 400) {
              // 恢复按钮状态
              $loginBtn.prop("disabled", false);
              $loginBtn.html(btnText);
              message.error(response.message);
            }
          });
        });
      });
    </script>
  </body>
</html>
